<template>
  <div id="context">
    <indextop></indextop>
    <!-- /.container -->
    <!-- /.theme-main-menu -->
    <!---main start--->
    <div class="maint" id="maint">
      <div class="maintx">
        <div style="float: left; width: 790px">
          <div
            class="left_side"
            v-for="(article, index) in currentList"
            :key="index"
          >
            <div class="rows">
              <router-link
                :to="{ path: 'articlePage', query: { id: article.id } }"
                tag="a"
              >
                <div class="pic left art_image">
                  <router-link
                    :to="{ path: 'articlePage', query: { id: article.id } }"
                    tag="a"
                  >
                    <img width="260" height="144"
                  /></router-link>
                </div>
                <div class="right">
                  <div class="title">
                    <!-- <a href target="_blank">{{ article.title }}</a> -->
                    <router-link
                      :to="{ path: 'articlePage', query: { id: article.id } }"
                      tag="a"
                      >{{ article.title }}</router-link
                    >
                  </div>
                  <div class="summary">
                    <router-link
                      :to="{ path: 'articlePage', query: { id: article.id } }"
                      tag="a"
                      >{{ article.cl_content }}</router-link
                    >
                  </div>
                  <div class="bq left_five">
                    <a href="#" target="_blank" @click="inss()"
                      >浏览量：{{ article.article_views }}&nbsp;&nbsp;</a
                    >
                  </div>
                  <div class="bq left_five">
                    <a href="#" target="_blank"
                      >点赞量：{{ article.fabulous }}</a
                    >
                  </div>
                  <div class="bq left_five">
                    <a href="#" target="_blank">评论：{{ article.comment }}</a>
                  </div>
                  <div class="row_footer">
                    <div class="upvote">
                      <a>
                        <span>作者：{{ article.author }}</span>
                      </a>
                    </div>
                  </div>
                </div></router-link
              >
            </div>
            <br />
          </div>
          <div>
            <el-pagination
              background
              layout="prev, pager, next"
              @current-change="handleCurrentChange"
              :current-page="1"
              :page-size="pageSize"
              :total="load_list.length"
              class="index_buttom"
            ></el-pagination>
          </div>
        </div>

        <!-----
        @current-change="handleCurrentChange"设置改变当前页执行的方法
        :current-page="1"设置当前页
        :page-size="pageSize"设置每一页显示数据数量
        :total="load_list.length"设置数据总数
        ----->
        <!-----index_left end----->

        <!-----index_right start----->
        <div class="right_side">
          <div class="hot_edu">
            <div class="top_bar">
              <div class="title">站长说</div>
            </div>
            <div class="hot_edu2">
              网上有很多说个人博客已经末落了，其实说的是第三方博客平台，因为个人建独立博客已经不再像以前那么困难，越来越多的独立个人博客开始出现，打造她们的自媒体平台。
              <br />我想说的是博客没有末落，只是以另外一种形式闪亮登场，如果你也有不再依靠第三方平台的想法，那就果断开始吧。
            </div>
          </div>
          <div class="hot_edu">
            <div class="top_bar">
              <div class="title">哲理故事</div>
              <div class="more">
                <a href="#">更多></a>
              </div>
            </div>
            <ul>
              <li>
                <img src="#" alt="木桶法则" />
                <div>
                  <a href="#" target="_blank">木桶法则</a>
                </div>
              </li>
              <li>
                <img src="#" alt="唐伯虎点秋香" />
                <div>
                  <a href="#" target="_blank">唐伯虎点秋香</a>
                </div>
              </li>
              <li>
                <img src="#" alt="天下第一的店小二" />
                <div>
                  <a href="#" target="_blank">天下第一的店小二</a>
                </div>
              </li>
              <li>
                <img src="#" alt="留个缺口给别人" />
                <div>
                  <a href="#" target="_blank">留个缺口给别人</a>
                </div>
              </li>
              <li>
                <img src="#" alt="右手握左手" />
                <div>
                  <a href="#" target="_blank">右手握左手</a>
                </div>
              </li>
            </ul>
          </div>
          <!-----index_right end----->
        </div>
      </div>

      <hr class="hr5" />
      <br />
      <!-----foot|start----->
      <div class="foot" style="background: #eff5f1">
        <div class="footer">
          <hr class="hr3" />
          <br />
          <a href="#">站点地图</a> ｜ <a href="#">关于本站</a> ｜
          <a href="#">友情链接</a> ｜ <a href="#">免责声明</a> ｜
          <a href="#">联系本站</a> ｜
          <a href="#">意见反馈</a>
          <br />Copyright&copy;2017-2027 www.pancun.com.cn All Rights Reserved.
          <br />
        </div>
      </div>
      <!------foot|end------>
    </div>
  </div>
</template>

<script>
import indextop from "@/components/index_top";
export default {
  data() {
    return {
      load_list: [],
      pageSize: 3,
      input: "请输入搜索内容",
      currentIndex: 1,
    };
  },
  components: {
    indextop,
  },
  mounted() {
    this.inss();
  },
  computed: {
    currentList() {
      let list = this.load_list.slice(
        (this.currentIndex - 1) * this.pageSize,
        this.currentIndex * this.pageSize
      );
      console.log(list);
      return list;
    },
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentIndex = val;
    },
    inss() {
      this.$axios({
        method: "POST",
        url: "api/index_load_data/",
        data: {},
      })
        .then((response) => {
          this.load_list = response.data.articles;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getArticlePage(e, art_id) {
      alert(art_id);
    },
  },
};
</script>